<template>
  <div class="app-container flex column" style="position: relative">
    <top-title :content="content" :updateTime="true"></top-title>
    <div v-has="'feature:add'" class="add-btn cursor" @click="addEditHandle({})">新增</div>
    <div class="f1 flex">
      <div class="left flex column">
        <div class="common-title flex align-center">
          <div class="icon"></div>
          <div class="context">行业分类</div>
        </div>
        <div class="sider-wrap">
          <sider></sider>
        </div>
      </div>
      <div class="right flex column">
        <div class="common-title flex align-center">
          <div class="icon"></div>
          <div class="context">特色功能</div>
        </div>

        <div class="f1">
          <div class="search-group">
            <div class="input-wrap">
              <div class="label">功能名称:</div>
              <div class="input-item">
                <a-input
                  v-model="queryParam.industryFeaturesName"
                  :maxLength="30"
                  clearable
                  placeholder="请输入功能名称"
                />
              </div>
            </div>
            <div class="btn-wrap">
              <a-button class="searchBtn" type="primary" @click="searchQuery()"> 搜索 </a-button>
              <a-button class="resetBtn" type="primary" @click="searchReset()"> 重置 </a-button>
            </div>
          </div>
          <a-table
            :columns="columns"
            :dataSource="dataSource"
            :pagination="ipagination"
            class="tableList"
            rowKey="id"
            @change="handleTableChange"
          >
            <template #appRouteUrl="records">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ records.appRouteUrl }} </span>
                </template>
                <span>{{ records.appRouteUrl }} </span>
              </a-tooltip>
            </template>

            <template #webRouteUrl="records">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ records.webRouteUrl }} </span>
                </template>
                <span>{{ records.webRouteUrl }} </span>
              </a-tooltip>
            </template>

            <template #miniRouteUrl="records">
              <a-tooltip placement="top">
                <template slot="title">
                  <span>{{ records.miniRouteUrl }} </span>
                </template>
                <span>{{ records.miniRouteUrl }} </span>
              </a-tooltip>
            </template>

            <template #iconUrl="records">
              <img :src="`${imgPrefix + records.iconUrl}`" alt="" style="width: 0.5rem; height: 0.5rem" />
            </template>
            <template v-slot:action="records">
              <span v-has="'feature:edit'" class="operation deatil-color" @click="addEditHandle(records)">编辑 </span>

              <span
                v-if="records.featuresStatus == 1"
                v-has="'feature:config'"
                class="operation deatil-color"
                @click="showDrawer(records)"
                >配置
              </span>

              <span v-has="'feature:delete'" class="operation warnColor" @click="showDelete(records)">删除 </span>
            </template>
          </a-table>
        </div>
      </div>
    </div>
    <!-- <component></component> -->
    <cus-drawer ref="cusDrawer" @refresh="searchQuery()"></cus-drawer>
    <add-model ref="addmodel" @refresh="searchQuery()"></add-model>
    <allMessage
      ref="allMessage"
      :publicVisible="publicVisible"
      @cancel="publicVisible = false"
      @tipMessage="tipMessage"
    ></allMessage>
  </div>
</template>

<script>
import sider from '../components/sider'
import cusDrawer from './modules/drawer'
import addModel from './modules/addModel'
import topTitle from '@/components/topTitle'
import allMessage from '@/components/allMessage'
import { comMethods } from '@/mixins/comMethods'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mapState } from 'vuex'
import { industryFeaturesDelete } from '@/api/industry'
export default {
  name: '',
  components: { sider, addModel, topTitle, allMessage, cusDrawer },
  mixins: [JeecgListMixin, comMethods],
  computed: {
    ...mapState({
      industryInformationId: (state) => state.user.industryInformationId,
    }),
  },
  watch: {
    industryInformationId(v) {
      this.queryParam.industryInformationId = v
      this.searchQuery()
    },
  },
  data() {
    return {
      url: {
        list: '/industry/industry_features/page',
      },
      content: [['特色功能']],
      imgPrefix: '',
      queryParam: {},
      visible: false,
      publicVisible: false,
      disableMixinCreated: true,
      columns: [
        {
          title: '序号',
          align: 'center',
          width: 100,
          customRender: function (t, r, index) {
            return parseInt(index) + 1
          },
        },
        {
          title: '功能名称',
          dataIndex: 'industryFeaturesName',
          ellipsis: true,
          align: 'center',
        },
        {
          title: 'ICON',
          align: 'center',
          scopedSlots: { customRender: 'iconUrl' },
        },
        {
          title: 'APP URL',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'appRouteUrl' },
        },
        {
          title: 'WEB URL',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'webRouteUrl' },
        },
        {
          title: '小程序 URL',
          align: 'center',
          ellipsis: true,
          scopedSlots: { customRender: 'miniRouteUrl' },
        },
        {
          title: '描述',
          align: 'center',
          dataIndex: 'memo',
        },
        {
          title: '操作',
          scopedSlots: { customRender: 'action' },
          align: 'center',
        },
      ],
    }
  },
  mounted() {
    this.searchQuery()
  },
  methods: {
    searchQuery() {
      this.queryParam.industryInformationId = this.$store.state.user.industryInformationId || '111' // 无意义 处理一开始获取不到报400的问题
      this.loadData()
    },
    addEditHandle(records) {
      records.industryInformationId = this.industryInformationId
      this.$refs.addmodel.show(records)
    },
    showDelete(records) {
      this.publicVisible = true
      this.$refs.allMessage.show(records)
    },
    tipMessage(records) {
      industryFeaturesDelete({ id: records.id }).then((res) => {
        this.$message.success(res.message)
        this.publicVisible = false
        this.searchQuery()
      })
    },
    showDrawer(records) {
      if (records.industryFeaturesName == '设施信息') {
        this.$refs.cusDrawer.show('/hotel/device_config/list')
      } else {
        this.$message.warning('此功能暂未开发！')
      }
    },
  },
  destroy() {},
}
</script>

<style lang="less" scoped>
.app-container {
  padding-top: 0;
  .left {
    flex: 1.3;
    background: var(--theme-container-bg);
    .sider-wrap {
      overflow-y: scroll;
      &::-webkit-scrollbar {
        width: 0;
      }
    }
  }
  .right {
    flex: 8.7;
    margin-left: 16px;
    background: var(--theme-container-bg);
    overflow-y: scroll;
    &::-webkit-scrollbar {
      width: 0;
    }

    .common-item-wrap {
      padding: 0 0 30px 0;
      display: flex;
      flex-wrap: wrap;
    }
    .common-wrap {
      width: 340px;
      height: 178px;
      background: var(--theme-container-bg);
      border-radius: 2px;
      border: 0.01rem solid var(--theme-input-border);
      padding: 0 20px;
      margin: 16px;

      section {
        height: 70px;
        padding-top: 15px;
        border-bottom: 1px solid #09427a;
        .left-content {
          font-size: 0.2rem;
          font-family: PingFang SC-Bold, PingFang SC;
          font-weight: bold;
          color: var(--theme-modal-label-value-color);
          .content {
            margin-left: 5px;
          }
        }
      }

      .bot {
        padding: 0 0 0 50px;
        font-size: 16px;
        font-weight: 500;
        color: #509eee;
        span {
          font-size: 16px;
          color: #1388ff;
        }

        .click {
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #47e829;
          cursor: pointer;
        }
      }
    }
  }

  background: var(--theme-content-bg);
  .common-title {
    height: 0.6rem;
    line-height: 0.6rem;
    padding-left: 0.26rem;
    border-bottom: 2px solid var(--theme-input-border);
    // transform: translateY(-6px);
    .icon {
      width: 8px;
      height: 8px;
      background: #1388ff;
      border-radius: 50%;
      margin-right: 8px;
    }
    .context {
      font-size: 0.16rem;
      font-weight: 500;
      color: #1388ff;
    }
  }
}
</style>
